<template>
  <div class="update-name">
    <!-- 导航栏 -->
    <van-nav-bar
      title="标题"
      left-text="取消"
      right-text="完成"
      left-arrow
      @click-left="$emit('close')"
      @click-right="onConfirm"
    />
    <!-- /导航栏 -->

    <div class="name-field-wrap">
      <van-field
        v-model="localName"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入昵称"
        show-word-limit
      />
    </div>
  </div>
</template>

<script>
  import { UpdateUserProfile } from '@/api/user'

  export default {
   name: 'UpdateName',
	 components:{},
	 props:{
     //接收父组件传递的v-model的数据
     value:{
       type:String,
       required:true
     }
   },
   data () {
     return {
       localName:this.value
     }
   },
	 computed: {},
	 watch: {},
	 created () {},
	 mounted() {},
   methods:{
     async onConfirm () {
       this.$toast.loading({
         message:'保存中',
         forbidclick:true //禁止背景点击
       })
       try {
         //请求提交更新用户昵称
         await UpdateUserProfile({
           name:this.localName
         })

         //更新成功 -> 修改父组件的name -> 关闭弹出层
         //发布input事件，更新父组件v-model绑定的数据
         this.$emit('input',this.localName)
         //this.$emit('update-name',this.localName)
         this.$emit('close')

          this.$toast.success('保存成功')
       } catch (err) {
         if(err && err.reponse && err.reponse.status === 409) {
           this.$toast.fail('昵称已存在')
         }
       }
     }
   }
  }
</script>

<style scoped lang="less">
  .name-field-wrap{
    padding:10px;
  }
</style>
